<template>
  <div class="item-video">
    <div class="video-list">
      <div class="grid-container">
        <div class="grid-item" :style="(180+(height-120))+'px'" v-for="item in dataList" :key="item.videoId">
          <div class="save-pic" @click="toDetail(item.videoId)" :style="'height:'+height+'px'">
            <el-image class="pic" :src="item.videoCover" :style="'height:'+height+'px'" fit="cover" alt=""></el-image>
          </div>
          <div class="title" @click="toDetail(item.videoId)">{{item.videoTitle}}</div>
          <div class="author-time">
<!--            <span  @click="toSpace(item.videoOwnerId)">{{item.videoOwnerNickname}}</span>-->
            <a :href="'/space/home/'+item.videoOwnerId" target="_blank" v-if="hasNickname">{{item.videoOwnerNickname}}</a>

            <span v-if="isSave">· 收藏于{{item.saveTime}}</span>
            <span v-if="hasTime">· {{item.videoPublishTime}}</span>
          </div>
        </div>


        <!--          <div class="grid-item">2</div>-->
        <!--          <div class="grid-item">3</div>-->
        <!--          <div class="grid-item">4</div>-->
        <!--          <div class="grid-item">5</div>-->

        <!-- 可以继续添加更多行 -->
      </div>

    </div>
  </div>
</template>
<script setup>
// const prop = defineProps(['dataList','isSave'])
import {useRouter} from "vue-router";

const prop = defineProps({
  dataList:{
    type:Array,
    default: []
  },
  isSave:{
    type:Boolean,
    default: false
  },
  height:{
    type:Number,
    default: 120
  },
  hasTime:{
    type:Boolean,
    default: false
  },
  hasNickname:{
    type:Boolean,
    default:true
  }
})
const router = useRouter()
const toDetail = (videoId)=>{
  // console.log(id)
  // router.push({
  //   path:'/video',
  //   query:{
  //     videoId: id
  //   }
  // })
  window.open("/video/"+videoId+"/","_blank")
}
const toSpace = (userId)=>{
  console.log("跳转到用户id为"+userId+"的空间")
  router.push({
    name:'home',
    params:{
      id: userId
    }
  })
}
</script>
<style lang="scss" scoped>
.item-video{

  .video-list{

    margin-top: 20px;
    .grid-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* 5列，每列等宽 */
      gap: 16px; /* 列与列、行与行之间的间距 */
      .grid-item {
        //background-color: #f0f0f0; /* 背景色 */
        //padding: 16px; /* 内边距 */
        //text-align: center; /* 文本居中 */

        //border-radius: 8px; /* 圆角 */
        //height: 180px;
        display: flex;flex-direction: column;
        justify-content: space-around;
        .save-pic{
          border-radius: 8px; /* 圆角 */
          height: 120px;
          overflow: hidden;
          .pic{
            cursor: pointer;
            width: 100%;
          }
        }
        .title{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          width: 218px;
          height: 40px;
          font-size: 14px;
          overflow: hidden;
          //white-space: nowrap;
          text-overflow: ellipsis;
          //vertical-align: bottom;
          //max-height: 40px;
        }
        .author-time{
          font-size: 12px;
          color: gray;
        }
      }
    }

  }
}
</style>